﻿
 <html>

<head>
	<meta charset="utf-8">
	<title>树形组件</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="/Public/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/Public/style/admin.css" media="all">
	<link id="layuicss-layer" rel="stylesheet"
		href="https://www.layui.com/admin/std/dist/layuiadmin/layui/css/modules/layer/default/layer.css?v=3.1.1"
		media="all">
	<style id="LAY_layadmin_theme">
		.layui-side-menu,
		.layadmin-pagetabs .layui-tab-title li:after,
		.layadmin-pagetabs .layui-tab-title li.layui-this:after,
		.layui-layer-admin .layui-layer-title,
		.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child {
			background-color: #20222A !important;
		}

		.layui-nav-tree .layui-this,
		.layui-nav-tree .layui-this>a,
		.layui-nav-tree .layui-nav-child dd.layui-this,
		.layui-nav-tree .layui-nav-child dd.layui-this a {
			background-color: #009688 !important;
		}

		.layui-layout-admin .layui-logo {
			background-color: #20222A !important;
		}
	</style>
</head>

<body layadmin-themealias="default">


	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">配置权限</div>
					<div class="layui-card-body">
						<form class="layui-form" action="{:U('Rbac/setAccess')}" method="POST"
							lay-filter="component-form-element">

							<div class="layui-row layui-col-space10 layui-form-item">
								<div class="layui-col-lg6">
									<label class="layui-form-label">选择权限：</label>
									<div class="layui-form-block">
										<button type="button" class="layui-btn layui-btn-primary"
											onclick="checkAll('#LAY-auth-tree-index')">全选
										</button>
										<button type="button" class="layui-btn layui-btn-primary"
											onclick="uncheckAll('#LAY-auth-tree-index')">全不选
										</button>
										<button type="button" class="layui-btn layui-btn-primary"
											onclick="showAll('#LAY-auth-tree-index')">全部展开
										</button>
										<button type="button" class="layui-btn layui-btn-primary"
											onclick="closeAll('#LAY-auth-tree-index')">全部隐藏
										</button>
									</div>
									<div class="layui-form-item" style="margin-top: 10px;">
										<div class="layui-input-block">
											<div id="LAY-auth-tree-index"></div>
										</div>
									</div>
								</div>
							</div>

							<input type="hidden" id="rid" name="rid" value="{$rid}">

							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit=""
										lay-filter="component-form-element">立即提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script src="/Public/layui/layui.js"></script>
	<script>
		layui.config({
			base: '/Public/lib/extend/',
		}).extend({
			authtree: 'authtree',
		});

		layui.use(['jquery', 'authtree', 'form', 'layer'], function () {
			var $ = layui.jquery;
			var authtree = layui.authtree;
			var form = layui.form;
			var layer = layui.layer;
			// 一般来说，权限数据是异步传递过来的
			var rid=$('#rid').val();
			$.ajax({
				url: '/Admin/Rbac/treeList?rid='+rid,
				dataType: 'json',
				success: function (data) {
					var trees = data.data.trees;
					// 如果后台返回的不是树结构，请使用 authtree.listConvert 转换
					authtree.render('#LAY-auth-tree-index', trees, {
						inputname: 'access[]',
						layfilter: 'lay-check-auth',
						autowidth: true,
					});
				}
			});
		});

		// 全选样例
		function checkAll(dst) {
			layui.use(['jquery', 'layer', 'authtree'], function () {
				var layer = layui.layer;
				var authtree = layui.authtree;

				authtree.checkAll(dst);
			});
		}
		// 全不选样例
		function uncheckAll(dst) {
			layui.use(['jquery', 'layer', 'authtree'], function () {
				var layer = layui.layer;
				var authtree = layui.authtree;

				authtree.uncheckAll(dst);
			});
		}
		// 显示全部
		function showAll(dst) {
			layui.use(['jquery', 'layer', 'authtree'], function () {
				var layer = layui.layer;
				var authtree = layui.authtree;

				authtree.showAll(dst);
			});
		}
		// 隐藏全部
		function closeAll(dst) {
			layui.use(['jquery', 'layer', 'authtree'], function () {
				var layer = layui.layer;
				var authtree = layui.authtree;

				authtree.closeAll(dst);
			});
		}
	</script>
</body>

</html> 




